<!--快速初始化项目-->
<template>
  <div>
    <ZTitle title="快速开始" />
    <div class="rapid_list">
      <div class="rapid_item" v-for="(item, index) in list" :key="index">
        <Item :data="item" />
      </div>
    </div>
  </div>
</template>
<script>
import Item from "./rapidItem";

export default {
  components: {
    Item,
  },
  data () {
    return {
      list: [
        {
          name: "Bootstrap",
          file: "bootstrap",
          dir: 'bootstrap_html',
          content: "Boostrap3构建Html项目",
        },
        {
          name: "Vue+Element",
          file: "element",
          dir: 'vue_element',
          content: "Vue+Element 构建单页面应用SPA",
        },
        {
          name: "Vue+IView",
          file: "vue",
          dir: "vue_iview",
          content: "Vue+IView 构建单页面应用SPA",
        },
        {
          name: "Vue+Ant-Design",
          file: "antd",
          dir: "vue_antd",
          content: "Vue+Ant-Design 构建单页面应用SPA",
        },
        {
          name: "Vue+Element+Nuxt",
          file: "nuxt",
          dir: "vue_element_nuxt",
          content: "Vue+Element+Nuxt 构建服务端渲染网站SSR",
        },
        {
          name: "React+Ant-Design",
          file: "antd",
          dir: "react_antd",
          content: "React+Ant-Design 构建单页面应用SPA",
        },
        {
          name: "React+Ant-Design",
          file: "next",
          dir: "react_antd_next",
          content: "React+Ant-Design+Next 构建服务端渲染网站SSR",
        },
        {
          name: "Layui",
          file: "layui",
          dir: "layui_html",
          content: "layui构建Html项目",
        },
        {
          name: "Layui",
          file: "layui",
          dir: "layui_spa",
          content: "layui构建单页面系统",
        },
        {
          name: "Jquery",
          file: "jquery",
          dir: "jquery",
          content: "Jquery各个版本下载，jquery-2.0以上版本不再支持IE 6/7/8。下载地址 http://www.jq22.com ",
        },
        {
          name: "CSS",
          file: "css",
          dir: "css",
          content: "css重定义",
        },
        {
          name: "MUI",
          file: "mui",
          dir: "mui",
          content: "mui移动端应用",
        },
        {
          name: "自适应",
          file: "adaption",
          dir: "self_adaption",
          content: "自适应解决方案",
        },
      ],
    };
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.rapid_list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex-basis: 300px;
  .rapid_item {
    width: 300px;
    padding: 5px;
  }
}
</style>